<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul,
      ol {
        list-style: none;
      }
      .carousel {
        position: relative;
        width: 880px;
        height: 550px;
        border: 1px solid #333;
        margin: 50px auto;
      }
      .pic li {
        position: absolute;
        left: 0;
        top: 0;
        width: 880px;
        height: 550px;
        display: none;
      }
      .pic li.current {
        display: block;
      }
      .btn a {
        position: absolute;
        top: 50%;
        width: 80px;
        height: 80px;
        margin-top: -40px;
        background-color: rgba(255, 255, 255, 0.3);
        text-decoration: none;
        color: #444;
        text-align: center;
        line-height: 80px;
        font-size: 60px;
        font-family: "SimSun";
      }
      .btn .left {
        left: 10px;
      }
      .btn .right {
        right: 10px;
      }
      .btn a:hover {
        background-color: rgba(255, 255, 255, 0.7);
      }
      .sub {
        position: absolute;
        bottom: 30px;
        left: 50%;
        width: 200px;
        height: 40px;
        margin-left: -100px;
        border-radius: 20px;
        background-color: rgba(255, 255, 255, 0.3);
      }
      .sub li {
        float: left;
        width: 20px;
        height: 20px;
        margin: 10px;
        border-radius: 50%;
        background-color: #ccc;
        cursor: pointer;
      }
      .sub li.current {
        background-color: #0ff;
      }
    </style>
  </head>
  <body>
    <div class="carousel" id="carousel">
      <ul class="pic" id="pic">
        <li class="current"><img src="lunbo/01.jpg" alt="" /></li>
        <li><img src="lunbo/02.jpg" alt="" /></li>
        <li><img src="lunbo/03.jpg" alt="" /></li>
        <li><img src="lunbo/04.jpg" alt="" /></li>
        <li><img src="lunbo/05.jpg" alt="" /></li>
      </ul>
      <div class="btn" id="btn">
        <a href="javascript:;" class="left" id="leftbtn">&lt;</a>
        <a href="javascript:;" class="right" id="rightbtn">&gt;</a>
      </div>
      <ol class="sub" id="sub">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </div>
    <script>
      //获取元素
      //轮播图容器
      var carousel = document.getElementById("carousel");
      //轮播图片列表
      var pics = document.getElementById("pic").children;
      //轮播指示圆点列表
      var subs = document.getElementById("sub").children;
      //左切换按钮
      var leftBtn = document.getElementById("leftbtn");
      //右切换按钮
      var rightBtn = document.getElementById("rightbtn");
      //默认第一张轮播图图片
      var index = 0;
      //轮播定时器
      var animationTimer = null;
      //轮播初始化
      function animation(index) {
        //初始化，所有指示点，图片类名置空
        for (var i = 0; i < pics.length; i++) {
          pics[i].className = "";
          subs[i].className = "";
        }
        // console.log(index);
        //当前元素设置对应类名
        pics[index].className = "current";
        subs[index].className = "current";
      }
      //左轮播动画
      function leftAnimation() {
        index--;
        // console.log("left", index);
        if (index < 0) {
          index = pics.length - 1;
        }
        animation(index);
      }
      //右轮播动画
      function rightAnimation() {
        index++;
        // console.log("right", index);
        if (index > pics.length - 1) {
          index = 0;
        }
        animation(index);
      }
      //制作左切换轮播动画
      leftBtn.onclick = leftAnimation;
      //制作右切换轮播动画
      rightBtn.onclick = rightAnimation;
      //开启定时动画
      animationTimer = setInterval(rightAnimation, 2000);
      //每个轮播指示点绑定动画切换函数事件
      for (var j = 0; j < subs.length; j++) {
        subs[j].index = j;
        subs[j].onclick = function () {
          //   console.log(this.index);
          index = this.index;
          animation(index);
        };
      }
      //鼠标移动到轮播图上时自动轮播动画停止，离开时动画继续
      carousel.onmouseover = function () {
        clearInterval(animationTimer);
      };
      carousel.onmouseout = function () {
        animationTimer = setInterval(rightAnimation, 2000);
      };
    </script>
  </body>
</html>
